{#    https://blog.csdn.net/weixin_42014939/article/details/89409665#}

{% extends 'admin/change_list.html' %}
{% load static %}

{% block object-tools %}
    {{ block.super }}

    <div>

        <div>
            <span
                style="
                    font-weight: 700;
                    margin:20px 20px 20px 20px;
                    font-size: 20px!important;
                    color: #666;
                "
            >
                {{ opts.verbose_name_plural }}
            </span>

            <a href="export_all_excel/" target="_blank">
               <button type="button" class="el-button el-button--default el-button--small"

                        style="
                        float: right;
                        margin-bottom: 10px;
                        margin-top: 10px;
                        margin-right: 12px;"

                       data-name="export_all_excel"><!----><!---->
                    <span class="fas fa-download"></span>
                    <span>
                        全部导出
                    </span>
                </button>
            </a>

            <a href="import-csv/">
                <button type="button" class="el-button el-button--default el-button--small"

                        style="
                        float: right;
                        margin-bottom: 10px;
                        margin-top: 10px;
                        margin-right: 12px;"

                        data-name="export_as_csv">
                    <i class="fas fa-upload"></i>
                    <span>
                        导入数据
                    </span>
                </button>
            </a>

        </div>
    </div>
{% endblock %}

{% block content_title %}
    <!-- ECharts单文件引入 -->
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
{% endblock %}

{% block result_list %}
{#    <a href="{% url 'spadmin:views_export' %}" style="font-weight: bold; font-size: 20px;">导出成xls</a>#}
    <div id="mains" style="height:400px; width: 1000px;"></div>
    <script>
        let myChart = echarts.init(document.getElementById('mains'));
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let day = [];

        data1_name = "总访问次数";
        data2_name = "PC端访问次数";

        data3_name = "不同ip访问次数";

        {#console.log("date.0 --- " + "{{ date.0 }}");#}
        {#console.log("date.0.level --- " + "{{ date.0.level }}");#}
        {#console.log("date.0.day --- " + "{{ date.0.day }}");#}

        {% for i in date %}
            data1.push({{ i.count_date }});      // 访问次数 views_count
            data2.push({{ i.count_date_pc }});  // 不同ip数量 ip_count
            data3.push({{ i.count_date_ip }});  // 不同ip数量 ip_count
            day.push("{{ i.day }}");     // 日期 days
        {% endfor %}

        // 填写echarts的options
        {% if 1 %}
        options = {
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,

            title: {
                text: '每日浏览次数'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: [data1_name, data2_name, data3_name]
            },

            xAxis: [
                {
                    type: 'category',
                    data: day
                }
            ],
            yAxis: [
                {
                    type: 'value',
                }
            ],

            series: [
                {
                    name: data1_name,
                    type: 'line',
                    data: data1,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                {
                    name: data2_name,
                    type: 'line',
                    data: data2,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                {
                    name: data3_name,
                    type: 'line',
                    data: data3,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
            ]
        };
        {% endif %}

    myChart.setOption(options);
    </script>

{% endblock %}